<docs-widget-viewer [title]="widgetTitle">
    <farris-progress [percent]="50"></farris-progress>
    <p class="viewer-des">基础使用</p>
    <farris-progress [percent]="60" [status]="'active'"></farris-progress>
    <p class="viewer-des">状态为active</p>
    <farris-progress [percent]="70" [status]="'error'"></farris-progress>
    <p class="viewer-des">状态为error</p>
    <farris-progress [percent]="100"></farris-progress>
    <p class="viewer-des">完成进度为100%</p>
    <div class="d-flex flex-wrap">
        <div class="progress-circle-item">
            <farris-progress [type]="'circle'" [percent]="30"></farris-progress>
            <p>普通圆形进度条</p>
        </div>
        <div class="progress-circle-item">
            <farris-progress [type]="'circle'" [percent]="100"></farris-progress>
            <p>完成进度为100%</p>
        </div>
        <div class="progress-circle-item">
            <farris-progress [type]="'circle'" [percent]="30" [status]="'success'"></farris-progress>
            <p>进度条状态为success</p>
        </div>
        <div class="progress-circle-item">
            <farris-progress [type]="'circle'" [percent]="10" [status]="'error'"></farris-progress>
            <p>进度条状态为error</p>
        </div>
    </div>
</docs-widget-viewer>
